<template>
    <div id="map">
    </div>
</template>

<script>
    import Map from 'ol/Map';
    import TileLayer from 'ol/layer/WebGLTile';
    import View from 'ol/View';
    import {OSM} from 'ol/source';

    export default {
        name: "WebGLTileLayer",
        data() {
            return {};
        },
        mounted() {
            let tileLayer = new TileLayer({
                source: new OSM(),
            });
            //初始化地图
            this.map = new Map({
                target: "map", //指定挂载dom，注意必须是id
                layers: [
                    tileLayer
                ],
                //配置视图
                view: new View({
                    center: [0, 0],
                    zoom: 0,
                }),
            });
            tileLayer.on("postrender",(event)=>{
                console.log(event);
            })
        },
    };
</script>


<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }
</style>